<template>
  <div class="other">
    <div class="body" id="otherBody">
      <el-table
        border
        :data="tableData"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :height="tableHeight"
      >
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              style="color: #1890ff"
              circle
              title="点击编辑"
              @click="editHandle(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.currentPage"
        :page-sizes="pages.pageSizes"
        :page-size="pages.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "other",
  data() {
    return {
      pageName:"其它功能 管理列表页",
      loading: false,
      tableHeight: 0,
      tableData: [],
      list: [
        {
          id: 39,
          name: "启动广告",
          createTime: "2022-02-15 14:12:09",
          updateTime: "2022-03-30 11:25:35",
        },
        {
          id: 7,
          name: "登录设置",
          createTime: "2022-02-12 09:35:20",
          updateTime: "2022-03-30 11:25:35",
        },
      ],
      pages: {
        currentPage: 1,
        pageSizes: [10, 20, 30],
        pageSize: 10,
        total: 10,
      },
    };
  },
  created() {},
  props: [],
  components: {},
  mounted() {
    this.$nextTick(() => {
      if (this.$parent.$parent.$parent.activeName === "other") {
        this.init();
      } else {
        setTimeout(() => {
          if (this.$parent.$parent.$parent.activeName === "other") {
            this.init();
          }
        }, 1000);
      }
    });
    window.resize = () => {
      this.setTableHeight();
    };

  },
  methods: {
    //初始化
    init() {
      this.getTableList();
      this.setTableHeight();
      setTimeout(() => {
        if (this.tableHeight === 0) {
          // //console.log("未检索到otherBody高度");
          this.setTableHeight();
        }
      }, 200);
    },
    //动态设置表格高度
    setTableHeight() {
      let bodyDom = document.getElementById("otherBody");
      if (bodyDom && bodyDom.getBoundingClientRect().height) {
        this.tableHeight = bodyDom.getBoundingClientRect().height;
      } else {
        if (this.$parent.$parent.activeName === "other") {
          setTimeout(() => {
            // //console.log("other再次获取table高度");
            this.setTableHeight();
          }, 1500);
        }
      }
    },
    //获取列表数据
    getTableList() {
      // this.loading = true;
      this.tableData = [];
      // setTimeout(() => {
        // this.loading = false;
        this.tableData = JSON.parse(JSON.stringify(this.list));
      // }, 800);
    },
    //编辑
    editHandle(row) {
      if (row.name === "启动广告") {
        this.$router.push({
          name: "setStartAds",
        });
      } else if (row.name === "登录设置") {
        this.$router.push({
          name: "setLogin",
        });
      }
    },
    //删除
    delHandle() {
      this.$confirm("删除后不可恢复, 确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //执行删除的方法
        })
        .catch(() => {});
    },
    //切换每页展示多少条数据
    handleSizeChange(pageSize) {
      this.pages.pageSize = pageSize;
      this.getTableList();
    },
    //点击分页
    handleCurrentChange(page) {
      this.pages.currentPage = page;
      this.getTableList();
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.other {
  height: 100%;
  .body {
    margin-bottom: 15px;
    height: calc(100% - 47px);
    .el-table {
      height: 100%;
    }
  }
  .pages {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
